<template>
    <div v-show="false">
        <el-card>
            <template #header>
                <div class="card_header">
                    <h1>选择您的会员套餐</h1>
                </div>
            </template>
        </el-card>
        <el-card class="mt">
            <h1>
                当前账号可充电次数:
                <el-tag type="success">
                    {{ accountCount }}次
                </el-tag>
            </h1>
        </el-card>
        <el-row :gutter="20">
            <el-col class="mt" :span="12">
                <el-card>
                    <div class="card">
                        <h1 class="name">充电桩次数(10元一次)</h1>
                        <div class="price">
                            <h1 class="pay_real_money">${{ realchargeCycles }}</h1>
                            <h1 class="pay_money">${{ chargeCycles }}</h1>
                        </div>
                        <p class="mt mb"> 可以享受{{ ruleForm.count }}次充电</p>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form :model="ruleForm" :rules="rules" style="width: 100%;">
                                    <el-form-item prop="count">
                                        <el-input v-model.number="ruleForm.count" style="font-size: 16px;"
                                            placeholder="请输入充电次数"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="12">
                                <el-button style="width: 100%;" type="primary">购买充电桩次数</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col class="mt" :span="12">
                <el-card>
                    <div class="card">
                        <h1 class="name">月卡</h1>
                        <div class="price">
                            <h1 class="pay_real_money">$39</h1>
                            <h1 class="pay_money">$48</h1>
                        </div>
                        <p class="mt mb">立即解锁基础功能</p>
                        <el-button style="width: 40%;" type="primary">立即开通</el-button>
                        <el-button style="width: 40%;" type="info">查看套餐功能</el-button>
                    </div>
                </el-card>
            </el-col>
            <el-col class="mt" :span="12">
                <el-card>
                    <div class="card">
                        <h1 class="name">季卡</h1>
                        <div class="price">
                            <h1 class="pay_real_money">$100</h1>
                            <h1 class="pay_money">$120</h1>
                        </div>
                        <p class="mt mb">充电立省百分之40，而且赠送专属客服</p>
                        <el-button style="width: 40%;" type="primary">立即开通</el-button>
                        <el-button style="width: 40%;" type="info">查看套餐功能</el-button>
                    </div>
                </el-card>
            </el-col>
            <el-col class="mt" :span="12">
                <el-card>
                    <div class="card">
                        <h1 class="name">年卡</h1>
                        <div class="price">
                            <h1 class="pay_real_money">$226</h1>
                            <h1 class="pay_money">$300</h1>
                        </div>
                        <p class="mt mb">充电立省百分之60，而且赠送专属客服,并可以将卡至多给予4人,更多优惠点击查看套餐</p>
                        <el-button style="width: 40%;" type="primary">立即开通</el-button>
                        <el-button style="width: 40%;" type="info">查看套餐功能</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <div class="member_center">
        <!-- 头部 -->
        <el-header>
            <el-card class="mt member_center_title">
                <div class="header">
                    <h1>会员中心</h1>
                    <el-icon class="icon">
                        <Bell />
                    </el-icon>
                </div>
            </el-card>
        </el-header>
        <el-main>
            <!-- 会员详细信息 -->
            <el-card class="mt user-content-card">
                <div class="user-content-status">
                    <div class="user-left">
                        <el-avatar src="https://picsum.photos/id/64/100/100" class="avatar" size="100"></el-avatar>
                        <div class="user-info">
                            <h1>张小明</h1>
                            <div style="margin-top: 10px;">
                                <el-tag class="mr">月卡会员</el-tag>
                                <span>有效期至 2024-12-31</span>
                            </div>
                        </div>
                    </div>
                    <div class="user-right">
                        <el-button class="renew">立即续费</el-button>
                        <el-button class="upgrade">升级会员</el-button>
                    </div>
                </div>
            </el-card>
            <!-- 会员成长属性 -->
            <Group :member_group_value="member_group_value" :target_group_value="target_group_value"
                :member_type="member_type">
            </Group>
            <!-- 会员权益 -->
            <Benefits></Benefits>
            <!-- 会员套餐 -->
            <div class="mt membership_package">
                <div class="member_title">
                    <h1>会员套餐</h1>
                    <el-link class="look" type="info">套餐详情</el-link>
                </div>
                <div class="package">
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <div class="mt container container_border-color_mouth">
                                <el-card>
                                    <h4 class="member_card">月卡会员</h4>
                                    <div class="pay_money">
                                        <p>￥200</p>/月
                                    </div>
                                    <span class="avg_money">平均每天￥1.3</span>
                                    <el-button disabled class="have_member_mouth" style="width: 100%;"
                                        type="primary">已经拥有</el-button>
                                </el-card>
                            </div>
                        </el-col>
                        <el-col class="col" :span="8">
                            <div class="container container_border-color_season">
                                <el-card style="padding: 20px;">
                                    <h4 class="member_card">年卡会员</h4>
                                    <div class="pay_money">
                                        <p>￥1080</p>/年
                                    </div>
                                    <span class="avg_money">平均每天￥1.3,省69</span>
                                    <el-button class="no_member_season" style="width: 100%;"
                                        type="primary">升级会员</el-button>
                                </el-card>
                            </div>
                            <span class="tag">最划算</span>
                        </el-col>
                        <el-col :span="8">
                            <div class="mt container container_border-color_year">
                                <el-card>
                                    <h4 class="member_card">季卡会员</h4>
                                    <div class="pay_money">
                                        <p>￥398</p>/月
                                    </div>
                                    <span class="avg_money">平均每天￥1.2</span>
                                    <el-button class="no_member_year" style="width: 100%;"
                                        type="primary">升级会员</el-button>
                                </el-card>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-main>
    </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import Benefits from './components/Benefits.vue'
import Group from './components/Group.vue'
import type { FormRules } from 'element-plus'
import { fa } from 'element-plus/es/locales.mjs'
// 会员成长值
const member_group_value = ref<number>(100)
// 下一级成长值
const target_group_value = ref<number>(1000)
// 会员类型
const member_type = ref<number>(1)
const checkNumber = (rule: any, value: any, callback: any) => {
    if (value <= 0) {
        callback(new Error("次数必须大于0"))
    }
    callback()
}
interface RuleForm {
    count: number
}

const ruleForm = ref<RuleForm>({
    count: 1
})
const rules = ref<FormRules<RuleForm>>({
    count: [
        { required: true, message: '次数不可以为空', trigger: "blur" },
        { validator: checkNumber, trigger: "blur" }
    ]
})
// 账户充电桩次数
const accountCount = ref<number>(5)

// 实际充电桩付款金额
const realchargeCycles = computed(() => {
    return ruleForm.value.count * 10
})
// 打折前充电桩付款金额
const chargeCycles = computed(() => {
    return ruleForm.value.count * 12
})
</script>

<style scoped lang="less">
.card {
    height: 200px;

    margin-left: 10px;
    padding: 30px;

    .name {

        margin-top: 20px;
        font-size: 25px;
    }

    div {
        display: flex;
        font-size: 30px;

        h1:first-child {
            margin-right: 10px;
        }

        h1:last-child {
            color: red;
            text-decoration: line-through;
        }

    }
}

.member_center {
    .member_center_title {

        top: 0;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 50px;


        }

    }

}

.user-content-card {
    background: linear-gradient(90deg, #4B96FF, #9D4EDD);
    color: white;
    border-radius: 20px;

    .user-content-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;

        .user-left {
            display: flex;
            align-items: center;

            .avatar {
                height: 60px;
                width: 60px;
            }

            .user-info {
                margin-left: 20px;
            }
        }

        .user-right {
            .renew {
                color: #b071e3;
            }

            .upgrade {
                background-color: #9157e1;
                color: white;
            }
        }
    }

}

// 每一个参套的边框颜色
.container_border-color_mouth {
    border-top: 5px solid #5b9eff;
}

.container_border-color_year {
    border-top: 5px solid #ffb800;
}

.container {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    overflow: hidden;

    .member_card {
        font-size: 20px;
    }

    .pay_money {
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 14px;
        color: gray;
        margin-bottom: 5px;

        p {
            color: black;
            font-size: 24px;
            font-weight: bold;
            margin-right: 5px;
        }
    }

    .avg_money {
        font-size: 14px;
        color: gray;
        margin-bottom: 20px;
        display: block;
    }
}

.container_border-color_season {
    border-top: 5px solid #9d4edd;
    position: relative;

}

.tag {
    position: absolute;
    top: -10px;
    right: 20px;
    color: white;
    background-color: #9d4edd;
    padding: 3px;
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    border-radius: 5px;
}


// 已经购买了选择这个样式
.have_member_mouth {
    background-color: white;
    color: #5b9eff;
}

// 没有购买的选择这个样式
.no_member_mouth {
    color: white;
}

// 已经购买了选择这个样式
.have_member_season {
    color: white;
}

// 没有购买的选择这个样式
.no_member_season {
    border: #9d4edd;
    background-color: #9d4edd;
    color: white;
}

.have_member_year {
    color: white;
}

// 没有购买的选择这个样式
.no_member_year {
    border: #ffb800;
    background-color: #ffb800;
    color: white;
}

.col {
    position: relative;
    height: 400px;
}
</style>